import React,{useState,useEffect,useLayoutEffect} from 'react'
import { View,Text,StyleSheet,TouchableOpacity,Image } from 'react-native'
import "../../global"

const styles = StyleSheet.create({
    activeOption:{
        backgroundColor:'rgba(255,153,102,0.4)',
        marginTop:pxtodpH(30),
        borderRadius:20
    },
    optionS:{
        marginTop:pxtodpH(30),
    },
    fontStyle:{
        fontSize:pxtodpW(28)
    },
    submitButton:{
        width:0.4*w,
        marginLeft:0.3*w,
        marginTop:pxtodpH(60),
        paddingTop:pxtodpH(15),
        paddingBottom:pxtodpH(15),
        borderRadius:40,
        borderColor:'black',
        borderWidth:1
    }
})
const PractiseEveryDay = ({navigation}) => {
    const [isActive,setIsActive] = useState([0,0,0,0]);
    const [questionData,setQuestionData] = useState();
    const [randomNum,setRandomNum] = useState(0);
    const [trueAnswer,setTrueAnswer] = useState('');
    const [chooseAnswer,setChooseAnswer] = useState();
    const [answerKey,setAnswerKey] = useState("http://82.157.94.91:8000/a1.png");
    const [chooseQues,setChooseQues] = useState({
        question_title:'http://82.157.94.91:8000/q1.png',
        answer_a:'f(0)是f(x)的极小值',
        answer_b:'f(0)是f(x)的极大值',
        answer_c:'(0, f(0))是y=f(x)的拐点',
        answer_d:'f(0)不是f(x)的极值, (0, f(0))也不是y = f(x) 的拐点',
        true_answer:'B',
        answer_key: "http://82.157.94.91:8000/a1.png"
    });
    const submitAnswer = () => {
        console.log(chooseQues.true_answer);
        navigation.navigate('AnswerPage',{chooseAnswer,trueAnswer,answerKey});
    }
    useLayoutEffect(()=>{
        fetch('http://82.157.94.91:8000/question')
            .then(res=>res.json())
            .then(res=>{
                setQuestionData(res.result);
            })
    },[])
    
  return (
        <View style={{
            height:h,
            backgroundColor:'white'
        }}>
            <View style={{
                marginTop:pxtodpH(80),
                marginLeft:pxtodpW(30),
                marginRight:pxtodpW(30),
                marginBottom:pxtodpH(20)
            }}>
                <Image
                    source={{uri:chooseQues.question_title}}
                    style={{height:pxtodpH(50),marginBottom:pxtodpH(30)}}
                />
                <TouchableOpacity 
                style={isActive[0]==1?styles.activeOption:styles.optionS}
                onPress={()=>{
                    setIsActive([1,0,0,0]);
                    setChooseAnswer('A');
                    setTrueAnswer(chooseQues.true_answer); 
                }}>
                    <Text style={styles.fontStyle}> A  {chooseQues.answer_a}</Text>
                </TouchableOpacity>
                <TouchableOpacity 
                style={isActive[1]==1?styles.activeOption:styles.optionS}
                onPress={()=>{
                    setIsActive([0,1,0,0]);
                    setTrueAnswer(chooseQues.true_answer); 
                    setChooseAnswer('B');
                }}>
                    <Text style={styles.fontStyle}> B  {chooseQues.answer_b}</Text>
                </TouchableOpacity>
                <TouchableOpacity 
                style={isActive[2]==1?styles.activeOption:styles.optionS}
                onPress={()=>{
                    setIsActive([0,0,1,0]);
                    setChooseAnswer('C');
                    setTrueAnswer(chooseQues.true_answer); 
                }}
                >
                    <Text style={styles.fontStyle}> C  {chooseQues.answer_c}</Text>
                </TouchableOpacity>
                <TouchableOpacity 
                style={isActive[3]==1?styles.activeOption:styles.optionS}
                onPress={()=>{
                    setIsActive([0,0,0,1]);
                    setChooseAnswer('D');
                    setTrueAnswer(chooseQues.true_answer); 
                }}
                >
                    <Text style={styles.fontStyle}> D  {chooseQues.answer_d}</Text>
                </TouchableOpacity>
            </View>
            <TouchableOpacity style={styles.submitButton} onPress={()=>{
                setRandomNum(Math.floor(Math.random()*questionData.length));
                setChooseQues(questionData[randomNum]);
            }}>
                <Text style={{
                    fontSize:25,
                    textAlign:'center'
                }}>换个题目</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.submitButton} onPress={submitAnswer}>
                <Text style={{
                    fontSize:25,
                    textAlign:'center'
                }}>提交</Text>
            </TouchableOpacity>
            <Image
                source={require('../../images/workhard.jpg')}
                style={{
                    width:0.8*w,
                    height:pxtodpH(300),
                    marginLeft:0.1*w,
                    marginTop:pxtodpH(60)
                }}
            />
        </View>
  )
}

export default PractiseEveryDay